import React, { useEffect, useState } from "react";
import "./index.css";
import axios from "axios";
import { Button } from "react-vant";
import { Notify, Cell } from "react-vant";
const Index: React.FC = () => {
  const [list, setList] = useState<any>([]);
  const [index, setIndex] = useState<any>(1);
  useEffect(() => {
    axios.get("/api/tabimg").then((resp: any) => {
      setList(resp.data.tabimg);
    });
  }, []);

  const qh = (v: any) => {
    setIndex(v);
  };

  return (
    <div>
      <div className="box1">
        <div className="top1">
          <div>
            <img
              src={
                list.length > 0 &&
                list[index] &&
                list[index].children[index].img
              }
            />
          </div>
          <div className="btn">
            <div>
              <p>
                {list.length > 0 &&
                  list[index] &&
                  list[index].children[index].name}
              </p>
              <p>
                {list.length > 0 &&
                  list[index] &&
                  list[index].children[index].xx}
              </p>
            </div>
            <div>
              <Button
                type="primary"
                onClick={() =>
                  Notify.show({ type: "success", message: "咨询成功" })
                }
              >
                立即咨询
              </Button>
            </div>
          </div>
        </div>
        <div className="button1">
          {list.length > 0 &&
            list.map((v: any, i: any) => (
              <div key={i}>
                <img src={v.title} onClick={() => qh(i)} />
              </div>
            ))}
        </div>
      </div>
    </div>
  );
};
export default Index;
